<script setup>

</script>


<template>
  <div class="common-layout">
    <el-container >

      <el-header style="background-color:rgba(70,76,91,0.42);">
        <img src="./img/logo2.png"><span style=" font-size: 40px;">tlias智能学习辅助系统</span>
      </el-header>

      <el-container>
        <el-aside width="200px" >
          <!-- ------------------------- -->
          <el-scrollbar >
            <el-menu :default-openeds="['1', '3']">
              <el-sub-menu index="1" class="sub-menu">
                <template #title>
                  <el-icon><HelpFilled /></el-icon>班级学员管理
                </template>
                <el-menu-item-group class="menu-item-group">
                  <el-menu-item index="1-1" class="menu-item">班级管理</el-menu-item>
                </el-menu-item-group>
                <el-menu-item-group class="menu-item-group">
                  <el-menu-item index="1-2" class="menu-item">学员管理</el-menu-item>
                </el-menu-item-group>
              </el-sub-menu>
              <el-sub-menu index="2"  class="sub-menu">
                <template #title>
                  <el-icon><HelpFilled /></el-icon>系统信息管理
                </template>
                <el-menu-item-group class="menu-item-group">
                  <router-link to="/demo">  <el-menu-item index="2-1" class="menu-item">部门管理</el-menu-item> </router-link>
                </el-menu-item-group>
                <el-menu-item-group class="menu-item-group">
                  <router-link to="/staff">  <el-menu-item index="2-2" class="menu-item">员工管理</el-menu-item> </router-link>
                </el-menu-item-group>

              </el-sub-menu>
              <el-sub-menu index="3"  class="sub-menu">
                <template #title>
                  <el-icon><HelpFilled /></el-icon>数据统计管理
                </template>
                <el-menu-item-group class="menu-item-group">
                  <el-menu-item index="2-1" class="menu-item">员工信息统计</el-menu-item>
                </el-menu-item-group>
              </el-sub-menu>
            </el-menu>
          </el-scrollbar>
          <!---------------------->
        </el-aside>
        <el-main >
          <!-- ----------------  -->
          <router-view> </router-view>
          <!-- -----------------  -->
        </el-main>
      </el-container>
    </el-container>
  </div>

</template>


<style setup>
.sub-menu{
  background-color: rgba(215,215,215,0.42);
}
.menu-item-group{
  background-color: rgba(238,238,238,0.65);
}
.menu-item{
  background-color: rgba(197,239,244,0.39);
}
</style>